Formatting cell values
Grid provides built in support for formatting numeric or date values.
Formatting numeric values
The formatting can be applied against columns of ron and edn types (the formating is defined for each column separately, so you can have different formatting types for different columns).
The basic syntax is:
grid.setNumberFormat(mask,index)
Or in case of initialization from XML:
<column format="mask"...
Or when initialization is from HTML:
<td ... format="mask"...
The mask defines how the number will be formatted, basically it is the string of zeros with two separators:
. - defines where the decimal point will be placed;
, - defines where the group separator will be placed.
data => mask => result
123456.789 => 0.00 => 123456.78
123456.789 => 0,000.00 => 123,456.78
123456.789 => 00,00 => 12,34,56
The 3rd and 4th parameters can be used to define the group separator and the decimal separator characters.
mygrid.setNumberFormat(index,"0,000.00",",","."); //(US English)
1456.789 => 1,456.78
mygrid.setNumberFormat(index,"0,000.00","","."); //(English)
1456.789 => 1456.78
mygrid.setNumberFormat(index,"0,000.00"," ",","); //(French)
1456.789 => 1 456.78
mygrid.setNumberFormat(index,"0,000.00",".",","); //(Russian)
1456.789 => 1.456,78
mygrid.setNumberFormat(index,"0,000.00"," ","."); //(Greek)
1456.789 => 1 456.78
mygrid.setNumberFormat(index,"0,000.00","'","."); //(Swiss)
1456.789 => 1'456.78
If you want the chars to be used as decimals, groups separators can be set globally as part of grid internationalization.
grid.i18n.decimal_separator=","
grid.i18n.group_separator=".";
mygrid.setNumberFormat(index,"0,000.00");
1456.789 => 1.456,78
FYI: If you have a statistics counter assigned to the column with defined numeric format, the formatting will be applied to results of the calculation as well.
(This will work even if the column type is different from ron|edn - so you can have a column with custom cell types and still have formatting applied to statistics counters)
Formatting date values
Date formatting can be applied to dhxCalendar and dhxCalendarA columns.
Date formatting applied to the whole grid (so it will be used in any column of dhxCalendar type) can be set as:
grid.setDateFormat(mask)
Or in case of initialization from XML:
<column format="mask"...
Or when initialization is from HTML:
<td ... format="mask"...
Please, take into account that while it is possible to define a few formats with initialization from XML or HTML, only the last format will be applied.
The mask can contain the following special markers:
%e Day of the month without leading zeros (01..31)
%d Day of the month, 2 digits with leading zeros (01..31)
%j Day of the year, 3 digits with leading zeros (001..366)
%a A textual representation of a day, three letters
%W A full textual representation of the day of the week
%c Numeric representation of a month, without leading zeros (0..12)
%m Numeric representation of a month, with leading zeros (00..12)
%b A short textual representation of a month, three letters (Jan..Dec)
%M A full textual representation of a month, such as January or March (January..December)
%y A two digit representation of a year (93..03)
%Y A full numeric representation of a year, 4 digits (1993..03)
For example:
grid.setDateFormat("%m/%d/%Y"); // => 01/25/1980
grid.setDateFormat(%d-%c-%y"); // => 25-1-80
grid.setDateFormat("%M %e, %W); // => January 25, Friday
More complex formatting rules
More complex formatting rules can be defined by creating custom excells.
© DHTMLX, 2008